<!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        /*function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();
            
            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }*/

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }
    
            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                //var filesArray = event.dataTransfer.files;
                //for (var i=0; i<filesArray.length; i++) {
                    //sendFile(filesArray[i]);
                //}
				
				var files = event.dataTransfer.files[0],
					items = event.dataTransfer.items,
					item = items ? items.item() : null,
					file = item ? item.getAsFile() : null,
					blob = file ? file.webkitSlice() : null,
					blob2 = blob ? blob.webkitSlice() : null;
				
				var reader = new FileReader();
				var reader2 = new FileReader();
				try {
					reader.readAsBinaryString(blob);
					reader2.readAsBinaryString(files);
				}
				catch( e ) {
					console.log(e);
				}
				console.log("<<<<<<<< reader >>>>>>>>>>");
				console.log(reader.error);
				console.log(reader.result);
				console.log("<<<<<<<< reader 2 >>>>>>>>>>");
				console.log(reader2.error);
				console.log(reader2.result);
				console.log("----------------------------------");
				console.log(event.target.result);

            }
		}
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>